Boilerplates and Meta-Frameworks

In the early days of React, back in 2015, starting a new React app was not easy.

All of the tools we've discussed, like ESLint and Babel and Webpack, needed to be implemented from scratch. Developers needed to figure out exactly what plugins they needed, and how to configure them. It could often take several days of work before we could actually start building the application itself!

This led to memes like this one circulating on Twitter:

The first solution to this problem was boilerplates.

A boilerplate is essentially a “pre-configured” empty React app. One of the most popular options was called react-boilerplate, created by Max Stoiber.

These solutions worked alright, but there were two common problems:

1. The folks creating the boilerplates had their own preferred tools and conventions. If that developer really likes Sass, they'll set it up to use Sass by default, and everyone who wants to use the boilerplate had better get on board.
2. All of the complexity was right there on display, and it felt overwhelming. Before even starting your application, there are dozens of inscrutable files, things like .travis.yml and jest.config.js.

In 2016, the React team at facebook had a new idea. They released create-react-app.

Create React App had one big innovation: hide all of the complexity inside an NPM dependency.

Specifically, react-scripts is an NPM dependency that manages the build tooling for you. Under the hood, it uses Webpack and Babel and ESLint and many other tools. As a result, there's very little clutter.

It supports a ton of common developer preferences out of the box. If you want to use Sass, you can, without having to configure anything.

For a long time, Create React App was the best way to get started with React. Unfortunately, it's been languishing over the past few years, as the React team has focused on full-stack implementations (discussed in Module 6). These days, Create React App is no longer recommended to use.

If you're looking to get up and running quickly, there are a number of modern build tools that perform the same role as Create React App.

My personal favourite is Parcel. It feels like a spiritual successor: it includes the same great clutter-free developer experience, but with way better performance. Instead of using Webpack, for example, it uses a Rust-based bundler called SWC.

Another very popular option is Vite.

So, we started with a bunch of developers manually creating React projects from scratch. Then, developers started sharing their boilerplates. Then, build tools like Create React App and Parcel came along.

There's one final step in this evolution: meta frameworks.

A meta framework is a framework built on top of an existing framework, like React.

The most popular example nowadays is Next.js. Next is a framework built on top of React that offers a ton of additional functionality.

For example, Next has a built-in router, and this router supports a ton of different rendering techniques. With Next, we can pre-generate HTML files for maximum performance, either when the user visits the page, or even when we build the site!

The React team has fully embraced this trend. In fact, bleeding-edge React features like React Server Components are available exclusively inside meta-frameworks like Next. We'll learn more about all of this in Module 6.

Other meta-frameworks include:

• Gatsby, a static site generator that uses React and GraphQL
• Remix, a full-stack meta-framework built on top of web standards by the team behind React Router.

Alright, so we've explored a lot of different options in this lesson. If you're starting a brand-new project, what should you use?

For serious “real-world” projects, you should almost certainly use a meta-framework. They offer much better performance, and a whole suite of features that make it easier to build large-scale projects.

As I write this in mid-2023, I think Next.js is the best option. It's the only meta-framework that has fully incorporated the latest React features. I use Next.js for this very course platform, and I have no regrets.

That said, meta-frameworks like Next.js have a significant learning curve. If you're just starting out with React, and/or you're building a smaller toy project, I recommend using a build tool like Parcel.

The first two projects in this course use Parcel because I want us to focus on learning React, and build tools like Parcel make it easy to get up and running quickly, without a lot of distractions or features we don't need.

And so, it depends where you are in your journey, and what sort of project you're planning to build.